<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    table {
      width: 500px;
      margin: 100px auto;
      border-collapse: collapse;
      text-align: center;
    }

    th {
      border: 1px solid black;
      background-color: pink;
    }

    td {
      border: 1px solid black;
      /* background-color: azure; */
    }
  </style>
  <body>
    <script>
      var contanerEle = document.getElementsByClassName("contaner")[0];
      var arr = [
        {
          name: "Jack",
          age: 18,
          gender: "男",
        },
        {
          name: "Rose",
          age: 20,
          gender: "女",
        },
        {
          name: "Top",
          age: 22,
          gender: "男",
        },
      ];
      var star = "<table>";
      var j = 0;
      star += "<tr ><th>名字</th><th>年龄</th><th>性别</th></tr>";
      for (var i = 0; i < arr.length; i++) {
        j++;
        if (j % 2 == 0) {
          star += '<tr style="background-color:pink">';
        } else {
          star += '<tr style="background-color:gray">';
        }
        for (var key in arr[i]) {
          star += "<td>" + arr[i][key] + "</td>";
        }
        star += "</tr>";
      }

      star += "</table>";

      document.body.innerHTML = star;
    </script>
  </body>
</html>
